<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <script src="js/controlDeviceBase.js"></script>
	<script type="text/javascript">
		var statusBarHeight,pixelRatio,screenWidth,screenHeight,pixelHeight,pixelWidth,systemPlatform;
    	//获取手机信息的回调接口
        function getSystemInfoCallback(resultStr){
            var jsonObject=JSON.parse(resultStr);
            systemPlatform=jsonObject['platform'];//获取手机操作系统
            screenWidth=window.screen.width;
            screenHeight=window.screen.height;
            pixelHeight=jsonObject['screenHeight'];
            pixelWidth=jsonObject['screenWidth'];
            pixelRatio=Math.ceil(pixelHeight/screenHeight);//算出屏幕像素比
            connectDevice(systemPlatform);//调用封装好的函数来做前期准备工作
        }
        //自定义的notify回调处理函数
        function customizeNotifyCallback(notifyData){
            switch(notifyData['data'][3]){
                    case '0':
                        notifyData['data'][7]=='1'?console.log('设置运动模式成功'):console.log('设置运动模式失败');
                        break;
                    case '3':
                        notifyData['data'][7]=='1'?console.log('打开或关闭实时数据上传功能成功'):console.log('打开或关闭实时数据上传功能失败');
                        break;
                    case '9':
                        notifyData['data'][11]=='1'?console.log('启动或停止运动成功'):console.log('启动或停止运动失败');
                        break;
                    case '1':
                        if(notifyData['data'][2]=='4'){
                            var sportCount=parseInt(notifyData['data'].substring(6,10),16);
                            var heartCount=parseInt(notifyData['data'].substring(14,16),16);
                            console.log('返回的实时运动数据: 次数'+sportCount+' 心率:'+heartCount);
                            app.sportCount='运动次数:'+sportCount+'次';
                            app.heartCount='心率:'+heartCount;
                        }
                        break;
                }
        }
        //自定义的准备工作做完之后的回调函数
        function customizeConnectCallback(){
            window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA0020301', 'writeDataCallback');//设置运动模式为Ab轮
        }
        //获取导航栏高度的回调函数
    	function getStatusBarHeightCallback(resultStr){
    		var jsonObject=JSON.parse(resultStr);
    		statusBarHeight=jsonObject['statusBarHeight'];
    	}
        window.hilink.getSystemInfoSync ('getSystemInfoCallback');//获取手机的操作系统信息
    	window.hilink.modifyTitleBar(false, '#FFFFFF', '');//设置导航栏颜色
    	window.hilink.getStatusBarHeight('getStatusBarHeightCallback');//获取导航栏高度
	</script>
	<style type="text/css">
        #app div{
            margin-top:15%; 
            height: 10%;
        }
        #app div:nth-of-type(1){
            margin-top:30%; 
        }        
        #app span{
            font-size: 70px;
        }
        #app button{
            width: 35%;
            height: 100px;
            font-size: 50px;            
        }
        .sportActionArea button:nth-of-type(1){
            margin-right: 10%;           
        }
        .sportActionArea button:nth-of-type(2){
            margin-left: 10%;           
        }
        #app select{
            width: auto;
            padding: 0;
            font-size: 70px;
            margin: 0;
            -webkit-appearance: none;
        }
        .formItem{
            margin-top: 5% !important;
        }
        .formItem span,.formItem input,.formItem button{
            font-size:xx-large !important;
            font-weight:bold;
        }
        .formItem button{
            height: 10% !important;
            width: 15% !important;
            margin: 0 10%;
        }
        .dialogMsg{
            width:80%;
            height: auto!important;
            border:solid 1px #000;
            background-color:#FFFFFF;
            position:absolute;
            text-align:center;
            left:10%;
            top:5%;
        }
        .dialogHistory{
            width:80%;
            height: auto!important;
            border:solid 1px #000;
            background-color:#FFFFFF;
            position:absolute;
            text-align:center;
            left:10%;
            top:5%;
        }
        .dialogHistory span {
            font-size: 40px!important;
        }
        .dialogHistory select {
            font-size: 40px!important;
        }
        .dialogHistory button {
            font-size: 30px!important;
            /*margin-left: 0 !important;*/
        }
        .dialogHistory table {
            font-size:25px;
            margin:auto;/*让表格居中显示*/
        }
        .dialogHistory table td {
            height:100px;
        },
        [v-cloak]/*隐藏未编译的 Mustache 标签直到实例准备完毕*/
        { 
            display:none;
        }
    </style>
</head>
<body>
<center>
	<div id="app">	
        <div class="mySelect">
            <span>运动方式:</span>
            <select v-model="selected" v-on:change="selectType">
            <option v-for="item in selectArray" v-bind:value="item.value">
                {{item.text}}
            </option>
        </select>
        </div>
		<div class="sportActionArea">
			<button v-bind:disabled="actionButtonDisabled" type="button" v-on:click="startSport">开始运动</button>
			<button v-bind:disabled="actionButtonDisabled" type="button" v-on:click="stopSport">结束运动</button>
		</div>
        <div>
            <button type="button" v-on:click="changeBodyMsg">修改</button>
        </div>
        <div>
            <button style="width: 50%" type="button" v-on:click="getServerHistory(1,1)">查看历史运动记录</button>
        </div>
		<div>
			<span >{{sportCount}}</span>
		</div>
		<div>
			<span >{{heartCount}}</span>
		</div>
        <div class="dialogMsg" v-if="bodyMsgSeen" v-cloak>
            <div class="formItem">
                <h1>请填写您的身体信息</h1>
                 <span>性别：</span>
                 <div style='display:inline;' v-for='item in items' >
                    <input type='radio' name='sex' :checked='item.checked' v-model='sex' :value='item.value'><span>{{item.display}}</span>
                </div>
            </div>
            <div  class="formItem">
                <span>身高：</span>
                <input type="text" v-model:value="bodyHeight" oninput = "value=value.replace(/[^\.\d]/g,'')">
            </div>
            <div  class="formItem">
                <span >体重：</span>
                <input  type="text" v-model:value="bodyWeight" oninput = "value=value.replace(/[^\.\d]/g,'')">
            </div>
            <div  class="formItem">
                <span >年龄：</span>
                <input type="text" v-model:value="age" oninput = "value=value.replace(/[^\.\d]/g,'')">
            </div>  
            <div  class="formItem">
                <button type="button" v-on:click="bodyMsgSure">确认</button> 
                <button type="button" v-on:click="bodyMsgCancel">取消</button>       
            </div> 
        </div>
        <div class="dialogHistory" v-if="serverHistorySeen" v-cloak>
            <span>时间范围:</span>
            <select v-model="historyRadioSelect" v-on:change="historySelectChange">
                <option v-for="item in historyRadioItems" v-bind:value="item.value">
                 {{item.text}}
                </option>
            </select>
            <my-table v-bind:items="sportLogArray"></my-table>
            <button type="button" v-on:click="historyLastPage">上一页</button>
            <span>第{{historyCurrentPage}}页/共{{historyTotalPage}}页</span>
            <button type="button" v-on:click="historyNextPage">下一页</button>
            <button type="button" v-on:click="closeHistoryDialog">关闭</button> 
        </div>
	</div>
</center>
	
	<script type="text/javascript">
        // 定义名为 todo-item 的新组件
        Vue.component('my-table', {
            props: ['items'],
            template: "<table border='1' cellspacing='0'><th>序号</th><th>动作次数</th><th>持续时间(s)</th><th>平均心率</th><th>消耗卡路里</th><th>日期</th><tr v-for='(item,index) in items' v-on:touchstart='trTouchStart' v-on:touchmove='trTouchmove' v-on:touchend='trTouchend' v-bind:key='item.id'><td>{{index+1}}</td><td>{{item.sportCount}}</td><td>{{item.duringTime}}</td><td>{{item.avgHeartRate}}</td><td>{{item.calorie}}</td><td>{{item.startTime.replace('T',' ')}}</td></tr></table>",
            methods:{
                trTouchStart:function(e){//当手指触摸历史记录时触发的函数
                    app.timeOutEvent = setTimeout(this.longPress,500);
                    e.preventDefault();//阻止滚动
                },
                trTouchmove:function(e){//当手指滑动历史记录时触发的函数
                    console.log("你这是滑动，不是长按");
                    clearTimeout(app.timeOutEvent);
                    app.timeOutEvent = 0;
                },
                trTouchend:function(e){//当手指从历史记录离开时触发的函数
                    clearTimeout(app.timeOutEvent);
                    if(app.timeOutEvent!=0)
                        console.log("你这是点击，不是长按");
                    return false;
                },
                longPress:function(){//当历史记录被长按时触发的函数
                    app.timeOutEvent = 0;
                    console.log('记录被长按了');
                }
            }     
        });
		var app = new Vue({
  			el: '#app',
  			data: {
                selected: 1,//select选中的值
                selectArray:[
                    {text: '蹲着滚',value:1},
                    {text: '站立滚',value:2}
                ],
    			sportCount: '运动次数:',
    			heartCount: '心率:',
                bodyMsgSeen:false,
                bodyHeight:0.0,
                bodyWeight:0.0,
                age:0,
                sex:0,
                items:[
                    {value:0,display:'男',checked:'checked'},
                    {value:1,display:'女'}
                ],
                actionButtonDisabled:false,
                sportLogArray:[],
                serverHistorySeen:false,
                timeOutEvent:0,
                historyRadioItems:[
                    {value:1,text:'全部'},
                    {value:2,text:'近半年'},
                    {value:3,text:'近三个月'},
                    {value:4,text:'近一个月'},
                    {value:5,text:'近一个星期'},
                    {value:6,text:'近三天'}
                ],
                historyRadioSelect:1,
                historyTotalPage:1,
                historyCurrentPage:1
  			},
  			methods: {
    			startSport: function () {//点击开始运动之后的调用函数
     				 if(myCurrentDeviceId!=null){
    					window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA30101', 'writeDataCallback');//打开数据上传功能
    					window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA90101', 'writeDataCallback');//开始运动
    				}
    			},
    			stopSport: function () {//点击停止运动之后的调用函数
     				 if(myCurrentDeviceId!=null){
    					window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA30100', 'writeDataCallback');//关闭数据上传功能
    					window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA90100', 'writeDataCallback');//停止运动
    				}
    			},
                selectType:function(){//改变运动方式之后触发的函数
                    if(myCurrentDeviceId!=null){
                        window.hilink.writeBLECharacteristicValue(myCurrentDeviceId, serviceUuid, writeUuid, 'FEA002050'+app.selected, 'writeDataCallback');//修改设备运动方式
                    }
                },
                changeBodyMsg:function(){//点击修改身体信息按钮之后触发的函数
                    this.bodyMsgSeen=true;
                    this.actionButtonDisabled=true;
                },
                bodyMsgSure:function(){//点击确认修改身体信息的按钮的调用函数
                    var bodyObject=new Object();
                    bodyObject['deviceId']=myDeviceServiceId;
                    bodyObject['sex']=app.sex==1;
                    bodyObject['height']=app.bodyHeight;
                    bodyObject['weight']=app.bodyWeight;
                    bodyObject['age']=app.age;
                    console.log(bodyObject);
                    console.log('现在去自己的云端修改身体信息');
                    Vue.http.put(myServiceUrl+'/bodyMag',bodyObject).then(function(res){//去自己云端修改身体信息
                        console.log('去自己的云端修改身体信息成功');
                        myDeviceMsg['sex']=bodyObject['sex'];//用myDeviceMsg来保存上一次用户修改前的数据，用于数据复原
                        myDeviceMsg['height']=bodyObject['height'];
                        myDeviceMsg['weight']=bodyObject['weight'];
                        myDeviceMsg['age']=bodyObject['age'];
                        app.actionButtonDisabled=false;
                        app.bodyMsgSeen=false;                        
                    },function(res){
                        console.log('去自己的云端修改身体信息失败,返回状态码:'+res.status);
                    });  
                },
                bodyMsgCancel:function(){//点击取消修改身体信息的按钮的调用函数
                    this.bodyHeight=myDeviceMsg['height'];//身体信息储存到vue对象,用于复原
                    this.bodyHeight=myDeviceMsg['weight'];
                    this.age=myDeviceMsg['age'];
                    this.sex=myDeviceMsg['sex']?1:0;
                    this.actionButtonDisabled=false;
                    this.bodyMsgSeen=false;            
                },
                getServerHistory:function(scopeType,page){//点击获取历史运动数据的按钮的调用函数
                    console.log('现在去运动获取历史运动数据');
                    Vue.http.get(myServiceUrl+'/sportLog/'+myDeviceServiceId+'/'+scopeType+'/4/'+page+'/10').then(function(res){
                        console.log('去云端获取历史运动数据成功');
                        //console.log(res);
                        app.sportLogArray=res.body['sportLogs'];
                        app.historyTotalPage=res.body['page'];
                        app.serverHistorySeen=true;
                        app.historyCurrentPage=page;
                    },function(res){                    
                        console.log('去云端获取历史运动数据失败,返回状态码:'+res.status);
                    });  
                },
                closeHistoryDialog:function(){//点击关闭历史运动数据的按钮的调用函数
                    this.serverHistorySeen=false;
                    this.historyRadioSelect=1;
                },
                historySelectChange:function(){//历史运动记录的时间选择radio改变的时候触发的函数
                    this.getServerHistory(this.historyRadioSelect,1);
                },
                historyLastPage:function(){//历史记录点击上一页触发的函数
                    if(this.historyCurrentPage>1)
                        this.getServerHistory(this.historyRadioSelect,this.historyCurrentPage-1);
                },
                historyNextPage:function(){//历史记录点击下一页触发的函数
                    if(this.historyCurrentPage<this.historyTotalPage)
                        this.getServerHistory(this.historyRadioSelect,this.historyCurrentPage+1);
                }
    		}
		});
	</script>
</body>
</html>